<?php require_once(__DIR__ . '/../layouts/top.php') ?>
<div class="row">
  <div class="span12">
    <h2>Stats for <?php echo $username; ?></h2>
  </div>
</div>
<div class="row-fluid">
  <div class="span12">
    <p>
      <!--
      This UCT timeline shows the past week, during which <?php echo $username; ?> posted <?php echo $count; ?> comments.
      PS the count is horribly wrong.-->
      Including <?php echo $count; ?> comments from the last <?php echo CronController::TIMELIMITDAYS; ?> days.
    </p>
    <p>&nbsp;</p>
    <div id="stats" style="width: 100%; height: 400px;"></div>
  </div>
</div>

<script type="text/javascript">
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('stats');
    var chart = new google.visualization.Timeline(container);

    var jsonData = <?php echo $jsoncode; ?>;

    var data = new google.visualization.DataTable(jsonData);

    var options = {
      timeline: {colorByRowLabel: true, avoidOverlappingGridLines: false, groupByRowLabel: true, showRowLabels: false},
      colors: ['#cbb69d', '#603913', '#c69c6e']
    };
    var options = {
      timeline: {
        showRowLabels: true, avoidOverlappingGridLines: false,
      },
      colors: ["#eee","#ccc","#aaa","#999","#777","#555","#333","#111","#111"]
    }
    //chart.draw(data);
    chart.draw(data, options);
  }

</script>

<?php require_once(__DIR__ . '/../layouts/bottom.php') ?>